<template>
	<view class="play">
		<view class="play-video">
			<block v-if="url && isShow">
				<video id="myVideo" v-if="/mp4|360|qqq/.test(type)" class="video" :src="url" objectFit="fill" controls :autoplay="isShow" @ended="onPlayEnd" />
				<u-link v-else :href="url" text="点击播放"></u-link>
			</block>
		</view>
		<view class="play-tab">
			<text class="play-tab__text" :class="{ 'play-tab__active': current === 0 }" @click="onTab(0)">简介</text>
			<text class="play-tab__text" :class="{ 'play-tab__active': current === 1 }" @click="onTab(1)">评论</text>
		</view>
		<swiper class="swiper" @change="onSwiper" :current="current">
			<swiper-item>
				<scroll-view class="scroll" scroll-y>
					<view class="scroll-content">
						<view class="detail" v-if="datalist.title">
							<view class="detail-top">
								<text class="detail-top__title" @click="goDeatil">{{ datalist.title }}</text>
								<Love :vid="query.id" :sid="1" :cid="datalist.listId" />
							</view>
							<view class="detail-info">
								<view class="detail-info__con">
									<view class="detail-status">
										<block v-if="isNumber(datalist.status)">更新至{{ datalist.status }}话</block>
										<block v-else>{{ datalist.status }}</block>
										<block v-if="datalist.tvcont">，{{ datalist.tvcont }}</block>
									</view>
									<view class="detail-gold">{{ datalist.gold }}</view>
								</view>
								<view class="detail_info_more">详情 ></view>
							</view>
						</view>
						<PlayList v-if="query.id && query.pid" :vid="query.id" :pid="query.pid" @getPlayNow="getPlayNow" />
						<Like v-if="datalist.actor" :actor="datalist.actor" :not="query.id" />
						<Hot v-if="query.id" :not="query.id" />
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="scroll" scroll-y><view class="scroll-content">评论</view></scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatPic, isNumber } from '@/utils/index';
import '@/utils/base64.min';
import authcode from '@/utils/authcode';
import playing from '@/utils/play';
import PlayList from '@/components/playList';
import Like from '@/components/Like';
import Hot from '@/components/Hot';
import Love from '@/components/Love';
export default {
	data() {
		return {
			url: '',
			play: '',
			type: '',
			key: '',
			pid: 0,
			current: 0,
			isShow: true,
			datalist: {},
			mInfo: {},
			query: {}
		};
	},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('myVideo');
	},
	methods: {
		...mapActions(['getPlayer', 'getPlayUrl']),
		formatPic,
		isNumber,
		init() {
			this.url = '';
			this.type = '';
			this.play = '';
			this.key = '';
			this.isShow = false;
		},
		onTab(index) {
			this.current = index;
		},
		onSwiper(e) {
			this.current = e.detail.current;
		},
		getPlay() {
			const { id, pid } = this.$mp.query;
			this.getPlayer({
				id,
				pid
			}).then(res => {
				console.log(res);
				this.datalist = res.data;
				this.getData();
			});
		},
		getOther(data = []) {
			return data.filter(item => item.playName === 'other');
		},
		goDeatil() {
			const { id } = this.$mp.query;
			uni.redirectTo({
				url: `/pages/subject/index?id=${id}`
			});
		},
		onPlay(play, type) {
			this.play = play;
			this.type = type;
			this.getData();
		},
		onPlayEnd() {
			console.log('结束了');
		},
		getPlayNow(obj) {
			const { data, type, key } = obj;
			if (this.pid === data.episode) return;
			this.init();
			this.play = data.vid;
			this.datalist.subTitle = data.title;
			this.type = type;
			this.key = key;
			this.pid = data.episode;
			this.getData();
		},
		getData() {
			const { id, pid } = this.$mp.query;
			const { play, type, datalist } = this;
			const { list = [], key } = datalist;
			if (list.length) {
				const other = this.getOther(list) || {};
				const isA = other.length > 0;
				const { playName, vid, playTitle } = isA ? other[0] : list[0];
				let player = '';
				if (play) {
					player = playing(type, authcode(atob(play), 'DECODE', this.key ? this.key : key, 0));
				} else {
					player = playing(playName, authcode(atob(vid), 'DECODE', key, 0));
				}
				this.mInfo = {
					playName,
					vid,
					playTitle
				};
				this.type = player.type;
				if (/360|qqq/.test(player.type)) {
					this.getPlayUrl({
						type: player.type,
						url: player.url
					}).then(res => {
						this.url = res.data;
					});
				} else {
					this.url = player.url;
				}
				this.isShow = true;
			}
		}
	},
	mounted() {
		this.getPlay();
		this.query = this.$mp.query;
	},
	components: {
		PlayList,
		Like,
		Hot,
		Love
	},
	onHide: function() {
		this.videoContext.pause();
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/scss/mixin.scss';
page {
	height: 100%;
}

.play {
	display: flex;
	flex-direction: column;
	height: 100%;

	&-video {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 422rpx;
		background: #000;
		color: #fff;

		.video {
			width: 100%;
			height: 100%;
		}
	}
	&-tab {
		padding: 20rpx;
		display: flex;
		border-bottom: 1px solid #dedede;
		&__text {
			flex: 1;
			font-size: 32rpx;
		}
		&__active {
			color: #f60;
		}
	}
}

.scroll {
	flex: 1;
	position: relative;
	background-color: #fff;
	height: calc(100vh - 522rpx);
}

.scroll-content {
	display: flex;
	flex-direction: column;
}

.detail {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	padding: 0 28rpx 20rpx;
	border-bottom: 1px solid #ebebeb;

	&-top {
		display: flex;
		&__title {
			flex-grow: 1;
			font-size: 28rpx;
			max-width: 490rpx;
			@include clamp(1);
		}
	}
	&-info {
		display: flex;
		font-size: 24rpx;
		align-items: center;
		color: #666;
		&__con {
			flex-grow: 1;
			line-height: 48rpx;
		}
		&__more {
			color: #999;
		}
	}
	&-gold {
		color: #f60;
	}
}
.swiper {
	height: calc(100vh - 482rpx);
}
</style>
